<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>{{user.birthday}}</td>
            <td><button @click="deleteById(user.id)">删除</button></td>
        </tr>
    </table>

</div>

</body>

    <script>
        new Vue({

            el:"#app",
            data:{
                users:[]
            },
            methods:{

                findAll(){
                    //发送请求查询数据
                    axios.post("/user/findAll.do").then((res)=>{

                        this.users= res.data;
                    })
                },

                deleteById(id){
                    var flag = window.confirm("是否确定删除?")
                    if (flag){
                      //发送请求，执行删除
                        axios.post("/user/deleteById.do?id="+id).then((res)=>{

                            this.findAll();
                        })
                    } else{
                        alert("取消删除")
                    }
                }


            },
            created(){
                this.findAll();
            }
        })
    </script>
</html>